<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script src="/static/js/jquery-1.10.2.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var ipAddress = null;
var one_hands_stretch_time= new Array();
var device1_one_hands_stretch_volt= new Array();
var device2_one_hands_stretch_volt= new Array();
var device3_one_hands_stretch_volt= new Array();
var other_hands_stretch_time= new Array();
var device1_other_hands_stretch_volt= new Array();
var device2_other_hands_stretch_volt= new Array();
var device3_other_hands_stretch_volt= new Array();
$.ajax({
   url: "/static/json/one_hands_stretch_time.json",
   type: "GET",
   dataType: "json",
   async : false,
   success: function(data) {
        $.each(data,function(key,value){
            if(key==1){
                $.each(value,function(i,iteam){
                        one_hands_stretch_time .push(iteam);
                });
            }
        });  
   }
})
$.ajax({
   url: "/static/json/one_hands_stretch_volt.json",
   type: "GET",
   dataType: "json",
   async : false,
   success: function(data) {
        $.each(data,function(key,value){
            if(key==1){
                $.each(value,function(i,iteam){
                        device1_one_hands_stretch_volt .push(iteam);
                });
            }
            if(key==2){
                $.each(value,function(i,iteam){
                        device2_one_hands_stretch_volt .push(iteam);
                });
            }
            if(key==3){
                $.each(value,function(i,iteam){
                        device3_one_hands_stretch_volt .push(iteam);
                });
            }
        });  
   }
})
$.ajax({
   url: "/static/json/other_hands_stretch_time.json",
   type: "GET",
   dataType: "json",
   async : false,
   success: function(data) {
        $.each(data,function(key,value){
            if(key==1){
                $.each(value,function(i,iteam){
                        other_hands_stretch_time .push(iteam);
                });
            }
        });  
   }
})
$.ajax({
   url: "/static/json/other_hands_stretch_volt.json",
   type: "GET",
   dataType: "json",
   async : false,
   success: function(data) {
        $.each(data,function(key,value){
            if(key==1){
                $.each(value,function(i,iteam){
                        device1_other_hands_stretch_volt .push(iteam);
                });
            }
            if(key==2){
                $.each(value,function(i,iteam){
                        device2_other_hands_stretch_volt .push(iteam);
                });
            }
            if(key==3){
                $.each(value,function(i,iteam){
                        device3_other_hands_stretch_volt .push(iteam);
                });
            }
        });  
   }
})
option = {
    title: [{
        left: 'center',
        text: '实验者一手部伸展'
    }, {
        top: '55%',
        left: 'center',
        text: '实验者二手部伸展'
    }],
     legend: {
        x:800,
        y:20,
        data:['device_1','device_2','device_3'],
    },
    toolbox: {
            left: 'right',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
         name : '时间',
         data:one_hands_stretch_time,
         gridIndex: 0,
    }, {
        name : '时间',
        data:other_hands_stretch_time,
        gridIndex: 1,
    }],
    yAxis: [{
        //splitLine: {show: false}
        name : '电压',
        min:0.78,
        max:0.9,
        splitNumber:8,
        gridIndex: 0,
    }, {
        //splitLine: {show: false},
        name : '电压',
        min:0.78,
        max:0.9,
        splitNumber:8,
        gridIndex: 1,
    }],
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1]
        },
        {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100,
            yAxisIndex: [0, 1]
        }
    ],
    grid: [{
        bottom: '60%'
    }, {
        top: '60%'
    }],
    //折线
    series: [{
    	name:'device_1',
        type: 'line',
        showSymbol: false,
        data: device1_one_hands_stretch_volt,
        markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
         markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
         },
    }, {
    	name:'device_2',
        type: 'line',
        showSymbol: false,
        data:device2_one_hands_stretch_volt,
        markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
         markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
         },
    },{
    	name:'device_3',
        type: 'line',
        showSymbol: false,
        data:device3_one_hands_stretch_volt,
        markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
         markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
         },
    },{
        name:'device_1',
        type: 'line',
        showSymbol: false,
        data:device1_other_hands_stretch_volt,
        xAxisIndex: 1,
        yAxisIndex: 1,
        markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
         markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
         },
    },{
        name:'device_2',
        type: 'line',
        showSymbol: false,
        data:device2_other_hands_stretch_volt,
        xAxisIndex: 1,
        yAxisIndex: 1,
        markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
         markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
         },
    },{
        name:'device_3',
        type: 'line',
        showSymbol: false,
        data:device3_other_hands_stretch_volt,
        xAxisIndex: 1,
        yAxisIndex: 1,
        markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
         markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
         },
    }]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>